<template>
  <!--这是导航组件-->
  <div class="nav">
    <ul>
      <li class="logo">
        <img src="~@/assets/img/logo.png" alt />
      </li>
      <li
        v-for="(val,index) in path"
        :key="index"
        :class="pathName==val.name?'navText active':'navText'"
        @click="skip(val.name)"
      >{{val.text}}</li>
      <li class="grabble">
        <input
          class="form-field"
          type="text"
          placeholder="搜索音乐 MV 歌单 用户"
          v-model="value"
          @focus="changKey(true)"
          @blur="changKey(false)"
          @keyup.enter="skipGrabble('GrabbleType1',$event)"
        />
        <span @click="skipGrabble('GrabbleType1',$event)">
          <img src="~@/assets/img/sousuo.png" alt height="30px" />
        </span>
        <div class="hotList">
          <hotBotList  v-if="showKey&&value==''"/>
          <graLenovo v-else-if="value!==''&&showKey" :keyWord="value"/>
        </div>
      </li>
      <li class="myhead">
        <ul>
          <li class="head" @click="login">
            <img :src="this.$store.state.headImg" alt v-if="this.$store.state.headImg" />
            <img src="~@/assets/img/head.png" alt v-else />
            <p v-if="!this.$store.state.headImg">登录</p>
          </li>
          <li class="dredge">开通会员</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import hotBotList from "components/notbusiness/hotBotList";
import graLenovo from "components/notbusiness/graLenovo";
export default {
  name: "navigation",
  components: {
    hotBotList,
    graLenovo
  },
  data() {
    return {
      value: "",
      path: [
        {
          text: "音乐馆",
          name: "Home"
        },
        {
          text: "我的音乐",
          name: "Mymusic"
        },
        {
          text: "客户端",
          name: "Client"
        },
        {
          text: "开放平台",
          name: "Dispark"
        },
        {
          text: "VIP",
          name: "Vip"
        }
      ],
      pathName: null,
      showKey: false
    };
  },
  watch: {
    $route: "newpage"
  },
  methods: {
    skip(path) {
      if (this.$route.matched[0].name !== path) {
        this.$router.push({ name: path });
        this.pathName = this.$route.matched[0].name;
      }
    },
    skipGrabble(path,event) {
      if (this.value) {
        this.$router.push({
          name: path,
          query: {
            keyWord: this.value
          }
        });
        this.pathName = this.$route.matched[0].name;
        this.enterBlur(event)
        this.value=''
      }
    },
    enterBlur(event) { event.target.blur() },
    newpage() {
      this.pathName = this.$route.matched[0].name;
    },
    login() {
      this.$emit("up");
    },
    changKey(key){
      setTimeout(()=>{
        this.showKey=key
      },120)
      
    }
  },
  mounted() {
    //console.log(this.$store.state.headImg)
  }
};
</script>

<style scoped lang='less'>
.nav {
  height: 90px;
  ul {
    margin: 0;
    padding: 0 40px;
    box-sizing: border-box;
    height: 100%;
    align-items: center;
    display: flex;
    li {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
    }
    li.logo {
      flex: 2;
      img {
        width: 100%;
      }
    }
    li.navText {
      flex: 1;
    }
    li.grabble {
      flex: 1;
      height: 40px;
      border: 1px solid #c9c9c9;
      border-radius: 3px;
      position: relative;
      .hotList {
        position: absolute;
        top: 40px;
        width: 100%;
        border: 1px solid #c9c9c9;
        border-top: none;
        z-index: 99;
        background: #fff;
      }
      .form-field {
        border: none;
        font-size: 14px;
        height: 35px;
        padding-left: 3px;
      }
      .form-field:focus {
        outline: none;
      }
    }
    li.myhead {
      flex: 2;
      margin-left: 10px;
      ul {
        width: 100%;
        padding: 0;
        display: flex;
        li.head {
          flex: 1;
          img {
            height: 40%;
            display: block;
            border-radius: 50%;
          }
          p {
            width: 100%;
            font-size: 14px;
          }
        }
        li.dredge {
          flex: 2;
          font-size: 14px;
          height: 50%;
          color: #fff;
          border-radius: 5px;
          background-color: #ff9900;
          img {
            height: 50%;
          }
        }
      }
    }
  }
}
.active {
  background-color: #ff9900;
  color: #fff;
}
</style>